<template>
  <div class="app-container" :style="setBgColor(albumpic_big)">
    <div class="header">
      <x-tabs
        title="选择设备"
        :list="equipmentList"
        label="equipmentName"
        :shadow="false"
        :required="true"
        :isSheBei="false"
        ref="shebei"
        @tab-click="changeEquipmen" />
      <!-- 选择题库 -->
      <x-tabs
        title="选择题库"
        ref="tiku"
        :list="bankList"
        label="bankName"
        :shadow="false"
        :required="true"
        :isSheBei="false"
        @tab-click="changeBank" />
      <!-- 选择题型 -->
      <x-tabs
        title="选择题型"
        ref="tixing"
        :list="questionTypes"
        label="name"
        :required="true"
        :isSheBei="false"
        @tab-click="changeQuestionTypes" />
    </div>
    <!-- 显示题库习题 -->
    <data-list :list="dataList" @detail="doTest" />
    <!-- loading -->
    <div v-loading="showLoading" :style="showLoading ? 'height:200px' : 'height:0px'" />

    <!-- 空状态 -->
    <el-empty v-show="!showLoading && !dataList.length" description="暂无数据" />

    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="pageNum"
      @current-change="changePage" />

    <!-- 题目内容弹框 -->
    <el-dialog
      v-if="showTestInfo"
      width="70%"
      :visible.sync="showTestInfo"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <div slot="title">
        【{{ questionInfo.questionTypeName }}】
        <span style="color: #909399"> ({{ questionInfo.questionType == 2 ? '多选题' : '单选题' }})</span>
      </div>
      <!-- 题目内容 -->
      <question :question-info="updateQuestionInfo" @answered="changeStatus" @doClose="closeDialog" />
    </el-dialog>

    <!-- <div id="blur"></div> -->
  </div>
</template>

<script>
import { getEquipment } from '@/api/report'
import { findBank, findQuestion, findQuestionInfo, findQuestionType } from '@/api/train'
import XTabs from '@/components/XTabs.vue'
import DataList from './DataList.vue'
import Question from './Question.vue'

const LETTER = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'] // 选项前缀
export default {
  name: 'Reports',
  components: {
    DataList,
    XTabs,
    Question,
  },
  computed: {
    updateQuestionInfo() {
      return this.questionInfo
    },
    // updateDataList() {
    //   console.log(this.dataList, 'updateDataList')
    //   return this.dataList
    // },
  },
  filters: {
    questionTypeFilter(id) {
      // const questionType = {
      //   1: 'A1型题',
      //   2: 'X型题',
      //   3: 'A3/4型题',
      //   4: 'B型题',
      //   5: 'A2型题',
      // }
      // return questionType[id]
    },
  },
  data() {
    return {
      activeBank: '', // 选中的题库id
      activequestionType: '1', // 选中的题型
      bankList: [], // 题库选项
      questionTypes: [],
      bankData: [], // 该题库中所有习题
      dataList: [], // 训练记录
      total: 0, // 总习题数量
      pageNum: 1,
      pageSize: 15,
      showLoading: false, // 加载动画
      questionInfo: null, // 试题信息
      showTestInfo: false, // 显示做题弹窗
      equipmentList: [], // 设备列表
      equipment: {}, //当前设备
      albumpic_big: '',
      topImg: {},
    }
  },
  async created() {
    await this.getEquipmentData() //获取设备
    // 获取题目类型名称
    await this.getQuestionType()
  },
  methods: {
    setBgColor(bgColor) {
      if (bgColor === '' || bgColor === '' || bgColor === undefined) {
        return { background: 'url(' + bgColor + ') center center no-repeat' }
      } else {
        return { background: 'url(' + bgColor + ') center center no-repeat' }
      }
    },
    // /system/type/getall
    // 获取题目类型名称
    async getQuestionType() {
      const res = await findQuestionType()
      console.log(res, 'res')
      this.questionTypes = res.data
      console.log(this.questionTypes, 'findQuestionType')
    },
    // 获取题库
    async getBanks() {
      console.log('goBanks')
      const res = await findBank({ questionEquipmentId: this.equipment.item.id })
      this.bankList = res.data
      if (res.data.length == 0) {
        return
      }
      // 获取当前题库训练题
      this.activeBank = res.data[0].id
      await this.getQuestions()
      // .then((res) => {
      //     this.bankList = res.data
      //     if (res.data.length == 0) {
      //       return
      //     }
      //     // 获取当前题库训练题
      //     this.activeBank = res.data[0].id
      //     this.getQuestions()
      //   })
    },
    async getEquipmentData() {
      //获取设备数据
      let res = await getEquipment()
      console.log('获取设备数据', res)
      if (res.code == 200) {
        this.equipmentList = res.equipment.map((item) => {
          return { equipmentName: item.equipmentName, id: item.id }
        })
      }
    },
    // 获取训练题
    async getQuestions() {
      console.log('获取当前题库训练题')
      // 清除之前的残留数据
      console.log(this.dataList.length, 'length')
      this.dataList.splice(0, this.dataList.length)
      console.log(this.dataList, 'dataList')
      console.log(this.activeBank, 'activeBank')
      this.showLoading = true
      const res = await findQuestion({
        questionEquipmentId: this.equipment.item.id,
        bankId: this.activeBank != '' ? this.activeBank : 3,
        questionType: this.activequestionType,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
      console.log(res.rows, 'rows')
      this.total = res.total
      this.total = res.total
      // this.dataList.push(...res.rows)
      if (this.dataList.length === 0) {
        this.dataList.push(...res.rows)
      } else {
        res.rows.forEach((row) => {
          this.dataList.forEach((item) => {
            if (item.id != row.id) this.dataList.push(row)
          })
        })
      }
      console.log(this.dataList, 'dataList')
      // console.log(data, 'data')
      // this.dataList = data
      // console.log(this.dataList, 'dataList')
      // this.dataList = this.dataList.filter((item, index) => {
      //   return this.dataList.indexOf(item, 0) == index
      // })
      // console.log(data, 'data')
      this.showLoading = false
    },

    // 切换题库
    async changeBank(event) {
      console.log('changeBank')
      console.log(event, 'event')
      this.activeBank = event.item.id
      this.pageNum = 1
      // this.$refs['tixing'].qingkong()
      // this.$refs['tixing'].ling()
      await this.getQuestions()
    },

    // 切换题目类型
    async changeQuestionTypes(event) {
      console.log('changeQuestionTypes')
      console.log(event, 'event')
      if (Object.keys(this.equipment).length == 0) {
        return
      }
      this.activequestionType = event.item.id
      this.pageNum = 1
      await this.getQuestions()
    },

    // 切换页码
    changePage(pageNum) {
      console.log('pageNum')
      // console.log(pageNum)
      this.pageNum = pageNum
      this.getQuestions()
    },

    // 显示训练题内容
    doTest(questionInfo) {
      console.log(questionInfo, 'doTestquestionInfo')
      findQuestionInfo({
        questionId: questionInfo.id,
        // isB: questionInfo.quType !== 4 ? questionInfo.quType : null,
      }).then((res) => {
        res.data.answer.map((item, index) => {
          item.answer = `${LETTER[index]}. ${item.answer}`
        })
        res.data.answerId = questionInfo.answerId
        res.data.status = questionInfo.status
        console.log('res.data', res.data)
        if (res.data.images) {
          res.data.images = res.data.images.map((item) => item)
        }
        this.questionInfo = res.data
        this.showTestInfo = true
        console.log('this.questionInfo', this.questionInfo)
      })
    },
    changeStatus(param) {
      const index = this.dataList.findIndex((item) => item.id === param.questionId)
      this.dataList[index].status = param.status
      this.dataList[index].answerId = param.answerId
    },
    closeDialog() {
      console.log(this.questionInfo)
      this.showTestInfo = false
    },

    async changeEquipmen(e) {
      //选择设备标题
      this.equipment = e
      this.$refs['tiku'].qingkong()
      this.$refs['tixing'].qingkong()
      console.log('当前点击的设备', e)
      let str = e.item.equipmentName
      this.albumpic_big = this.topImg[str]
      await this.getBanks()
    },
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  box-sizing: border-box;
  width: 100%;
  height: 95vh;

  overflow-y: scroll;
  background-size: 100% 100% !important;
  .header {
    border-radius: 15px;
    background: #e5f5ff;
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    padding: 0 25px;
  }
  #blur {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    // background: inherit;
  }

  .tabs-container {
    background-color: rgba(0, 0, 0, 0);
  }
}

.el-loading-mask {
  background-color: rgba(0, 0, 0, 0);
}
</style>
